<template>
  <van-popup class="cropperWrap" v-model="modelShow" position="top" @close="closePopup">
    <div class="vueCropperWrap">
      <vueCropper
        class="vueCropper"
        ref="cropper"
        :img="option.img"
        :outputSize="option.outputSize"
        :outputType="option.outputType"
        :info="option.info"
        :full="option.full"
        :autoCropWidth="option.autoCropWidth"
        :autoCropHeight="option.autoCropHeight"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :original="option.original"
        :autoCrop="option.autoCrop"
        :fixed="option.fixed"
        :fixedNumber="option.fixedNumber"
        :centerBox="option.centerBox"
        :infoTrue="option.infoTrue"
        :fixedBox="option.fixedBox"
        :high="option.high"
        :mode="option.mode"
      />
    </div>
    <div class="tabWrap">
      <van-button type="default" @click="closePopup">取消</van-button>
      <van-icon name="replay" @click="rotateImage" />
      <van-button type="primary" @click="getCropFile">裁剪</van-button>
    </div>
  </van-popup>
</template>
<script>
import { VueCropper } from "vue-cropper";
import cropperViewMixin from "./cropperView";
export default {
  mixins: [cropperViewMixin],
  components: {
    VueCropper,
  },
  props: {
    //返回文件类型 默认
    fileType: {
      type: String,
      default: function () {
        return "Blob";
      },
    },
  },
  data() {
    return {
      fileData: {},
      modelShow: false,
      imageFileName: "",
      option: {
        img: "",
        outputSize: 0.8,
        info: false, // 裁剪框的大小信息
        outputType: "jpeg", // 裁剪生成图片的格式
        canScale: false, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        autoCropWidth: window.innerWidth - 100 + "px", // 默认生成截图框宽度
        autoCropHeight: window.innerWidth - 100 + "px", // 默认生成截图框高度
        high: true, // 是否按照设备的dpr 输出等比例图片
        fixedBox: true, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMove: true, //上传图片是否可以移动
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: true, // 截图框是否被限制在图片里面
        infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
        mode: "100% auto", // 图片默认渲染方式
        enlarge: 1, //图片根据截图框输出比例倍数
        // maxImgSize:2000,//限制图片最大宽度和高度
      },
    };
  },
  methods: {
    //取消
    closePopup() {
      this.modelShow = false;
    },
    //父组件启动 裁剪并传值
    startCropper(e) {
      this.fileData = e;
      this.imageFileName = e.file.name;
      this.imageToBase64(e.file);
    },
  },
  mounted() {},
  computed: {},
};
</script>
<style lang="scss" scoped>
@import "./style.scss";
</style>